<template>
  <div id="header">
    <el-row :gutter="20">

      <el-col :span="8" :offset="4">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect1"
        >

          <router-link to="/" class="link">
            <el-menu-item index="1">Home</el-menu-item>
          </router-link>  
          
          <el-sub-menu index="2">
            <template #title>Categroy</template>
            <span v-for="category in categories.data" v-bind:key="category.id">
              <router-link :to="{ name: 'Column', params: { name: category.name } }">
                <el-menu-item>
                    {{category.name}}
                </el-menu-item>
              </router-link>
            </span>
          </el-sub-menu>

          <el-sub-menu index="3" v-if="userInfo">
            <template #title>Article</template>
            <router-link to="/article/create" class="link">
              <el-menu-item index="3-1">Create Article</el-menu-item>
            </router-link>
            <router-link to="/myarticles" class="link">
              <el-menu-item index="3-2">Article List</el-menu-item>
            </router-link>
          </el-sub-menu>

          <router-link to="/tool" class="link">
            <el-menu-item index="4">Tool</el-menu-item>
          </router-link>
          
        </el-menu>
        
      </el-col>


      <el-col :span="7" :offset="5">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect2"
        >
          <router-link to="/login" class="link" v-if="!userInfo">
            <el-menu-item index="1">Login</el-menu-item>
          </router-link>

          <el-sub-menu index="2" v-if="userInfo">
            <template #title><el-icon><avatar /></el-icon>{{userInfo.name}}</template>
              <el-menu-item index="2-1" @click="$router.push({name:'Profile'})">个人主页</el-menu-item>
              <el-menu-item index="2-1" @click="$router.push({name:'ArticleCreate'})">发布文章</el-menu-item>
              <el-menu-item index="2-1" @click="$router.push({name:'MyArticles'})">我的文章</el-menu-item>
              <el-menu-item index="2-2" @click="logout">退出登录</el-menu-item>
          </el-sub-menu>  

        </el-menu>
      </el-col>

    </el-row>
  </div>

</template>

<script>
import { mapState, mapActions } from 'vuex';
import categoryService from "@/service/categoryService";
import {Avatar, Close} from '@element-plus/icons'

export default {
  name: "Header",
  components:{
      Avatar,
      Close,
  },
  data(){
    return{
      categories:"",
    }
  },
  computed: mapState({
    userInfo: (state) => state.userModule.userInfo,
  }),

  mounted(){
      categoryService.get_category_list().then((response) => (this.categories = response.data.data));
  },

  methods:{
    ...mapActions('userModule', ['logout']),
    handleSelect1(key, keyPath) {
        console.log(key, keyPath);
      },
    handleSelect2(key, keyPath) {
        console.log(key, keyPath);
      },
    flush(){
      this.$router.go(0)
    }
  },
  
};
</script>


<style scoped>

#header{
  text-align: center;
  margin-top: 20px;
  font-family: "Verdana";
  font-weight: 500;
  font-style: normal;
  color: black;
}
.link {
  text-decoration: none;
}


@font-face {
  font-family: 'iconfont';  /* Project id 2995257 */
  src: url('//at.alicdn.com/t/font_2995257_3ba45kzylrt.woff2?t=1646973088206') format('woff2'),
       url('//at.alicdn.com/t/font_2995257_3ba45kzylrt.woff?t=1646973088206') format('woff'),
       url('//at.alicdn.com/t/font_2995257_3ba45kzylrt.ttf?t=1646973088206') format('truetype');
}

.iconfont{
    font-family:"iconfont" !important;
    font-size:15px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.1px;
    -moz-osx-font-smoothing: grayscale;}
</style>
